<template>
  <div>
    <el-button
      class="newBlog"
      type="success"
      round
      v-if="userStatus == '0' || userStatus == '1' || userStatus == '2'"
      @click="$router.push('/editBlog')"
      >发布新帖子</el-button
    >

    <div class="list">
      <el-checkbox-group
        v-model="checkedCities"
        @change="handleCheckedCitiesChange"
      >
        <el-checkbox v-for="city in cities" :label="city" :key="city">{{
          city
        }}</el-checkbox>
      </el-checkbox-group>
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange"
        >全选</el-checkbox
      >
    </div>
    <div style="height: 50px"></div>
    <el-table
      :data="tableData"
      border
      @row-click="rowClick"
      style="width: 85%"
      :header-cell-style="{
        background: '#e2d2d2',
        height: '30px',
        color: '#000000',
      }"
    >
      <el-table-column prop="theme" label="主题"> </el-table-column>
      <el-table-column prop="title" label="标题"> </el-table-column>
      <el-table-column prop="author" label="作者"> </el-table-column>
      <el-table-column prop="createTime" label="发帖时间"> </el-table-column>
      <el-table-column prop="commentCounts" label="回复"> </el-table-column>
      <el-table-column prop="newestCommentTime" label="回复时间">
      </el-table-column>
      <el-table-column prop="id" label="" v-if="false"> </el-table-column>
    </el-table>
    <div style="margin-top: 50px; margin-left: 600px">
      <el-pagination
        background
        :current-page="params.page"
        :page-size="params.pageSize"
        :page-sizes="[5, 7, 10, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { mapState } from 'vuex';
import { reqBlogsList } from '@/api';
import requests from '@/api/ajax.js';
const cityOptions = ['旅游攻略', '新闻资讯', '书院趣事'];
export default {
  data() {
    return {
      checkAll: false,
      isIndeterminate: true,
      checkedCities: ['旅游攻略'],
      cities: cityOptions,
      tableData: [],

      total: 1,
      tableDataFilter: [],
      currentPage: 1,
      currentIndex: '',
      pagesize: 10,
      form: {},
      params: {
        page: 1,
        pageSize: 10,
        type0: '旅游攻略',
        type1: '',
        type2: '',
      },
    };
  },
  methods: {
    async rowClick(record, index) {
      if (this.userStatus !== '') {
        const res = await requests({
          url: '/back/currentBrowse',
          method: 'POST',
          params: {
            blogId: record.id,
          },
        }).then((res) => {});
      }

      this.$router.push('/blogs/?id=' + record.id);
      this.$store.dispatch('reqBlogId', record.id);
    },
    handleSizeChange(val) {
      this.params.pageSize = val;
      this.load();
    },
    handleCurrentChange(val) {
      this.params.page = val;
      this.load();
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    async load() {
      await requests
        .get('/blogs/list', {
          params: this.params,
        })
        .then((res) => {
          if (res.code === 1) {
            // console.log('请求发送了ya');
            this.tableData = res.data.records;
            this.total = res.data.total;
            // console.log(this.tableData);
          }
        });
    },
  },
  computed: {
    ...mapState({
      userStatus: (state) => {
        return state.login.status;
      },
    }),
  },
  mounted() {
    this.load();
  },

  watch: {
    checkedCities() {
      this.checkedCities[0] === undefined
        ? (this.params.type0 = '')
        : (this.params.type0 = this.checkedCities[0]);
      this.checkedCities[1] === undefined
        ? (this.params.type1 = '')
        : (this.params.type1 = this.checkedCities[1]);
      this.checkedCities[2] === undefined
        ? (this.params.type2 = '')
        : (this.params.type2 = this.checkedCities[2]);

      this.load();
    },
  },
};
</script>
<style lang="less" scoped>
.table {
  margin-top: 30px;
  position: relative;
  // height: 600px;
  width: 80%;
}
.newBlog {
  margin-left: 100px;
  float: left;
  // margin-bottom: 40px;
}

.el-checkbox-group {
  float: left;
}
.el-checkbox {
  float: left;
  margin-left: 50px;
}
.el-checkbox-group {
  margin-left: 100px;
}
.el-table {
  // position: absolute;
  margin-left: 100px;
  // margin-top: 500px;
}
.id_r {
  display: none;
}
</style>
